<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例</title>
	<!-- 包含头部信息用于适应不同设备 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 包含 bootstrap 样式表 -->
	<link rel="stylesheet" href="./css/bootstrap.min.css">
  </head>

  <body>
	  
	  <nav class="navbar navbar-inverse">
	    <div class="container-fluid">
	      <!-- Brand and toggle get grouped for better mobile display -->
	      <div class="navbar-header">
	        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	          <span class="sr-only">Toggle navigation</span>
	          <span class="icon-bar"></span>
	          <span class="icon-bar"></span>
	          <span class="icon-bar"></span>
	        </button>
	        <a class="navbar-brand" href="#">易小勤</a>
	      </div>
	  
	      <!-- Collect the nav links, forms, and other content for toggling -->
	      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	        <ul class="nav navbar-nav">
	          <li><a href="#">角色管理</a></li>
			  <li><a href="#">班级管理</a></li>
			  <li><a href="#">老师管理</a></li>
	          <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">学生管理 <span class="caret"></span></a>
	            <ul class="dropdown-menu">
	              <li><a href="#">申请请假</a></li>
				  <li role="separator" class="divider"></li>
	              <li><a href="#">申请转班</a></li>
	              <li><a href="#">录入面试题</a></li>
	            </ul>
	          </li>
	        </ul>
	        <ul class="nav navbar-nav navbar-right">
	          <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a>
	            <ul class="dropdown-menu">
	              <li><a href="#">上传头像</a></li>
	              <li><a href="#">修改密码</a></li>
	              <li><a href="#">修改基本信息</a></li>
	            </ul>
	          </li>
	        </ul>
	      </div><!-- /.navbar-collapse -->
	    </div><!-- /.container-fluid -->
	  </nav>
	  
	  <div class="container">
		  
			  <!--模态框 开始-->
			  <div class="modal fade" id="studentAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			    <div class="modal-dialog" role="document">
			      <div class="modal-content">
			        <div class="modal-header">
			          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			          <h4 class="modal-title" id="myModalLabel">学生新增</h4>
			        </div>
			        <div class="modal-body">
						
					  <!-- https://v3.bootcss.com/css/#forms -->
			          <form class="form-horizontal">
						  
						<div class="form-group">
						  <label for="studentName" class="col-sm-2 control-label">姓名</label>
						  <div class="col-sm-10">
						    <input type="text" class="form-control" id="studentName" name="studentName" placeholder="姓名">
						  </div>
						</div>
						
						<div class="form-group">
						  <label for="studentGender" class="col-sm-2 control-label">性别</label>
						  <div class="col-sm-10">
						    <label class="radio-inline">
						      <input type="radio" name="studentGender" id="studentGender1" checked="checked" value="M">男
						    </label>
						    <label class="radio-inline">
						      <input type="radio" name="studentGender" id="studentGender2" value="F">女
						    </label>
						  </div>
						</div>
						
			            <div class="form-group">
			              <label for="studentEmail" class="col-sm-2 control-label">邮箱</label>
			              <div class="col-sm-10">
			                <input type="email" class="form-control" name="studentEmail" id="studentEmail" placeholder="987366988@qq.com">
			              </div>
			            </div>
						
			            <div class="form-group">
			              <label for="inputPassword3" class="col-sm-2 control-label">班级</label>
			              <div class="col-sm-10">
							  <select class="form-control" name="clazzId">
							    <option>前端班</option>
							    <option>后端班</option>
							    <option>测试班</option>
							    <option>UI班</option>
							  </select>
			              </div>
			            </div>
			          </form>
			        </div>
			        <div class="modal-footer">
			          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			          <button type="button" class="btn btn-primary">保存</button>
			        </div>
			      </div>
			    </div>
			  </div>
			  
			  <!--模态框 结束-->
				
	  		  
	  		  <div class="row">
	  			  <div class="col-md-4">
	  				  <button class="btn btn-primary" id="studentAddButton">新增</button>
	  				  <button class="btn btn-danger">删除</button>
	  			  </div>
	  			  
	  		  </div>
	  		  <div class="row">
	  			  <div class="col-md-12">
	  				  <table class="table table-hover ">
	  					  <tr>
	  						 <th>#</th>
	  						 <th>姓名</th>
	  						 <th>性别</th>
	  						 <th>邮箱</th>
	  						 <th>班级</th>
	  						 <th>操作</th>
	  					  </tr>
	  					  
	  					  <tr>
	  						  <td>10010</td>
	  						  <td>周海燕</td>
	  						  <td>女</td>
	  						  <td>1284810796@qq.com</td>
	  						  <td>后端班</td>
	  						  <td>
	  							  <button class="btn btn-primary btn-sm">
	  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
	  							  </button>
	  							  
	  							  <button class="btn btn-danger btn-sm">
	  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
	  							  </button>
	  						  </td>
	  					  						 
	  					  </tr>
	  					  <tr>
	  						  <td>10020</td>
	  						  <td>方雅浩</td>
	  						  <td>男</td>
	  						  <td>1284810796@qq.com</td>
	  						  <td>后端班</td>
	  						  <td>
	  							  <button class="btn btn-primary btn-sm">
	  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
	  							  </button>
	  							  
	  							  <button class="btn btn-danger btn-sm">
	  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
	  							  </button>
	  						  </td>
	  					  						 
	  					  </tr>
	  					  <tr>
	  						  <td>10010</td>
	  						  <td>周海燕</td>
	  						  <td>女</td>
	  						  <td>1284810796@qq.com</td>
	  						  <td>后端班</td>
	  						  <td>
	  							  <button class="btn btn-primary btn-sm">
	  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
	  							  </button>
	  							  
	  							  <button class="btn btn-danger btn-sm">
	  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
	  							  </button>
	  						  </td>
	  						 
	  					  </tr>
	  					  <tr>
	  						  <td>10020</td>
	  						  <td>方雅浩</td>
	  						  <td>男</td>
	  						  <td>1284810796@qq.com</td>
	  						  <td>后端班</td>
	  						  <td>
	  							  <button class="btn btn-primary btn-sm">
	  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
	  							  </button>
	  							  
	  							  <button class="btn btn-danger btn-sm">
	  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
	  							  </button>
	  						  </td>
	  					  						 
	  					  </tr>
	  				  </table>
	  				  
	  			  </div>
	  		  </div>
	  		  
	  		  <!-- 显示分页条 -->
	  		  <div class="row">
	  			  
	  			  <div class="col-md-6">
	  				  总页数：
	  			  </div>
	  			  <div class="col-md-6">
	  				  <nav aria-label="Page navigation">
	  				    <ul class="pagination">
	  					  <li><a href="#">首页</a></li>
	  				      <li>
	  				        <a href="#" aria-label="Previous">
	  				          <span aria-hidden="true">&laquo;</span>
	  				        </a>
	  				      </li>
	  				      <li><a href="#">1</a></li>
	  				      <li><a href="#">2</a></li>
	  				      <li><a href="#">3</a></li>
	  				      <li><a href="#">4</a></li>
	  				      <li><a href="#">5</a></li>
	  				      <li>
	  				        <a href="#" aria-label="Next">
	  				          <span aria-hidden="true">&raquo;</span>
	  				        </a>
	  				      </li>
	  					  <li><a href="#">末页</a></li>
	  				    </ul>
	  				  </nav>
	  			  </div>
	  		  </div>
	  		  
	  </div>
	  
	  <script src="js/jquery-2.1.1.min.js"></script>
	  <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
	  <script src="js/bootstrap.min.js"></script>
	  
	  <script>
		$(function(){
			
			$('#studentAddButton').click(function(){
				
				// 打开模态框 https://v3.bootcss.com/javascript/#modals-examples
				$('#studentAddModal').modal({
					backdrop:"static",
				});
			});
		});
	  </script>
  </body>

</html>
